import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { Todoclear } from '../../store/actions/todo'
import classNames from 'classnames'
import { filterActive } from '../../store/actions/filter'

export default function TodoFooter () {
  const dispatch = useDispatch()
  const active = useSelector((state) => state.filter)
  const list = useSelector((state) => state.todo)
  const doenLength = list.filter((item) => item.done === false).length
  // 清空已完成
  const handleClick = () => {
    dispatch(Todoclear())
  }
  // 1. 在 Redux 中准备一个初始的变量
  // 2. 用每一项的标记和初始变量进行比较，如果相等，就使用 selected class
  // 3. 点击的时候用当前标记更新 Redux 中的初始变量
  const filterArr = ['all', 'active', 'completed']
  return (
    <footer className='footer'>
      <span className='todo-count'>
        <strong>{doenLength}</strong> item left
      </span>
      <ul className='filters'>
        {filterArr.map((item) => (
          <li key={item}>
            <a
              className={classNames({
                selected: item === active,
              })}
              onClick={(e) => {
                e.preventDefault
                dispatch(filterActive(item))
              }}
              href='##'
            >
              {item.slice(0, 1).toUpperCase() + item.slice(1)}
            </a>
          </li>
        ))}

      </ul>
      <button className='clear-completed' onClick={handleClick}>Clear completed</button>
    </footer>
  )
}